<script setup lang="ts">
import { getUserInfoAPI } from '@/services/user'
import { onMounted, ref } from 'vue'
import type {
  UserInfo,
  SomeInfo,
  DrugOrder,
  Tools,
  OrderInfo
} from '@/types/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showSuccessToast } from 'vant'
const userInfo = ref<UserInfo>()

// 用户的收藏，关注，积分，优惠券的信息组
const someInfo = ref<SomeInfo[]>([
  {
    title: '收藏',
    count: 0,
    define: 'collectionNumber'
  },
  {
    title: '关注',
    count: 0,
    define: 'likeNumber'
  },
  {
    title: '积分',
    count: 0,
    define: 'score'
  },
  {
    title: '优惠券',
    count: 0,
    define: 'couponNumber'
  }
])
// 药品订单
const drugOrder = ref<DrugOrder[]>([
  {
    title: '待付款',
    count: 0,
    icon: 'user-paid',
    define: 'paidNumber'
  },
  {
    title: '待发货',
    count: 0,
    icon: 'user-shipped',
    define: 'receivedNumber'
  },
  {
    title: '待收货',
    count: 0,
    icon: 'user-received',
    define: 'shippedNumber'
  },
  {
    title: '已完成',
    count: 0,
    icon: 'user-finished',
    define: 'finishedNumber'
  }
])
// 获取用户信息
onMounted(async () => {
  const res = await getUserInfoAPI()
  userInfo.value = res.data
  if (userInfo.value) {
    // userInfo.value.orderInfo
    someInfo.value.forEach((item) => {
      item.count = userInfo.value![item.define as keyof UserInfo] as number
    })
    drugOrder.value.forEach((item) => {
      item.count = userInfo.value?.orderInfo[
        item.define as keyof OrderInfo
      ] as number
    })
  }
})

// 快捷工具
const tools = ref<Tools[]>([
  {
    title: '我的问诊',
    path: '/user/consult'
  },
  {
    title: '我的处方',
    path: '/'
  },
  {
    title: '家庭档案',
    path: '/user/patient'
  },
  {
    title: '地址管理',
    path: '/order/address'
  },
  {
    title: '我的评价',
    path: '/'
  },
  {
    title: '官方客服',
    path: '/'
  },
  {
    title: '设置',
    path: '/'
  }
])
// 退出登录
const user = useUserStore()
const router = useRouter()
const logout = async () => {
  await showConfirmDialog({
    title: '温馨提示',
    message: '您确认要退出优医问诊吗？'
  })
  user.removeUserInfo()
  showSuccessToast('成功退出！')
  // 跳转到登录页面
  router.replace('login')
}
/* mockjs数据
axios.get('/patient/message/list').then((res) => {
  console.log(res)
}) */
</script>

<template>
  <div class="User-page">
    <header>
      <van-row class="top">
        <van-col span="6">
          <van-image round width="70" height="70" :src="userInfo?.avatar" />
        </van-col>
        <van-col class="meta">
          <span class="meta-name">{{ userInfo?.account }}</span>
          <van-icon name="edit" color="#16C2A3" />
        </van-col>
      </van-row>
      <van-row class="foot">
        <van-col v-for="(item, index) in someInfo" :key="index" :span="6">
          <p class="count">{{ item.count }}</p>
          <p class="title">{{ item.title }}</p>
        </van-col>
      </van-row>
    </header>
    <div class="card">
      <van-row justify="space-between" class="head">
        <van-col>
          <h3>药品订单</h3>
        </van-col>
        <van-col class="all">
          <span>全部订单</span>
          <van-icon name="arrow" />
        </van-col>
      </van-row>
      <van-row class="icons">
        <van-col :span="6" v-for="(item, index) in drugOrder" :key="index">
          <van-badge :content="item.count === 0 ? '' : item.count">
            <DP-icon :name="item.icon" :size="28"></DP-icon>
          </van-badge>
          <p class="title">{{ item.title }}</p>
        </van-col>
      </van-row>
    </div>
    <div class="card">
      <van-row justify="space-between" class="head" style="height: 44px">
        <van-col>
          <h3>快捷工具</h3>
        </van-col>
      </van-row>
      <div class="tools">
        <van-cell
          v-for="(item, index) in tools"
          :key="index"
          :title="item.title"
          is-link
          :to="item.path"
          class="tools-cell"
          :border="false"
        >
          <template #icon>
            <DP-icon
              :name="`user-tool-0${index + 1}`"
              :size="18"
              class="tools-icon"
            ></DP-icon>
          </template>
        </van-cell>
      </div>
    </div>
    <a href="javascript:;" class="logout" @click="logout">退出登录</a>
  </div>
  <virtual-list></virtual-list>
</template>

<style lang="scss" scoped>
.User-page {
  padding: 0 15px 65px;
  background-color: var(--cp-bg);
  header {
    background-image: linear-gradient(
      180deg,
      rgba(44, 181, 165, 0.46),
      rgba(44, 181, 165, 0)
    );
    margin: 0 -15px;
    height: 200px;
    padding: 50px 15px 0;
    box-sizing: border-box;
    .top {
      height: 70px;
      .meta {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        .meta-name {
          margin: 5px 0 10px;
        }
      }
    }
    .foot {
      margin-top: 15px;
      height: 56px;
      .van-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .count {
          font-size: 18px;
          font-weight: 500;
        }
        .title {
          margin-top: 4px;
          font-size: 12px;
          color: var(--cp-dark);
        }
      }
    }
  }
  .card {
    margin-top: 15px;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 15px 5px;
    .head {
      height: 50px;
      line-height: 50px;
      .all {
        color: var(--cp-dark);
        font-size: 14px;
      }
    }
    .icons {
      height: 50px;
      padding: 0;
      .van-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title {
          font-size: 12px;
        }
      }
    }
    .tools {
      .tools-cell {
        padding: 0;
        height: 50px;
        display: flex;
        align-items: center;
        .tools-icon {
          margin-right: 10px;
        }
      }
    }
  }
  .logout {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-price);
  }
}
</style>
